<template>
  <div class="opt-wrap">
    <div class="opt-top">
      <span>以下商品{{info.active_rule}}</span>
    </div>
    <div class="opt-goods">
      <div class="goods-item" v-for="goods in lists" :key="goods.item_id">
        <div class="goods-img">
          <a @click="openLink(goods.link_item)">
            <img :src="goods.pic_url+'160x160'" alt="" v-if="goods.is_compress==1">
            <img :src="goods.pic_url" alt="" v-else>
          </a>
        </div>
        <div class="goods-info">
          <div class="title">{{goods.title}}</div>
          <div class="stock">
            <div class="price" v-html="scaleGoodsPriceFn(goods.price)"></div>
            <div class="num">剩余{{goods.num}}件</div>
          </div>
          <div class="shop-car" @click="handleOpenSkuDialog(goods)"></div>      
        </div>
      </div>
    </div>
    <shop-code ref="shopCode"></shop-code>
    <sku-dialog :visible.sync="skuDialogVisible" :itemId="itemId"></sku-dialog>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2019-12-19 10:59:00
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2019-12-19 10:59:04
   */
  import skuDialog from '../../components/skuDialog'
  import { scaleGoodsPrice } from '@/utils/index.js'
  import { openPage } from '@/utils/utils'
  import { fixedPrice } from '@/api/item/activity'
  import ShopCode from '@/components/ShopCode'
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    components: {
      skuDialog,
      ShopCode
    },
    data() {
      return {
        skuDialogVisible: false,
        id: '',
        info: '',
        itemId: 0,
        lists: []
      }
    },
    methods: {
      openLink(url){
        openPage(url)
      },
      init() {
        const params = {
          id: this.id
        }
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 50000)
  
        fixedPrice(params).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.info = res.data.info
            this.lists = res.data.lists
          } else {
            this.$Error(res.msg)
          }
        })
      },
      /**
       * 打开SKU弹窗
       */
      handleOpenSkuDialog(data) {
        const buy_need_fans = this.$store.getters.wxConfig.buy_need_fans
        const that = this
        if (buy_need_fans == 1) {
          that.$isFans(() => {
            this.$Error('请先等待商家绑定公众号')
            return false
          }, () => {
            that.$refs.shopCode.dialogVisible = true
            return false
          }, () => {
          // 打开sku弹窗
            that.skuDialogVisible = true
            that.itemId = Number(data.item_id)
          })
        } else {
          // 打开sku弹窗
          that.skuDialogVisible = true
          that.itemId = Number(data.item_id)
        }

        // this.itemId = Number(data.item_id)
        // this.skuDialogVisible = true
      },
      /**
       * 商品价格 整数放大
       */
      scaleGoodsPriceFn(price, className) {
        return scaleGoodsPrice(price, className)
      }
    },
    created() {
      this.id = this.$route.query.id
      this.init()
    },
    beforeCreate() {
      $('body').addClass('bg_white')
    },
    destroyed() {
      $('body').removeClass('bg_white')
    }
  })
</script>

<style lang="scss">
  @import "src/styles/mixin";
  @import "src/styles/variables";
  .opt-wrap{
    padding-bottom:40px;
    .opt-top{
      background: #FFF5EB;
      color: #F46610;
      text-align: center;
      font-size: 28px;
      line-height: 1;
      padding: 26px 0;
    }    
    .goods-item{
      position:relative;
      display:flex;
      padding-left:20px;
      .goods-img{
        margin-right:20px;
        padding:20px 0;
        img{
          display:block;
          width:200px;
          height:200px;
          border-radius:12px;
        }
      }
      .goods-info{
        flex:1;
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        padding:20px 30px 20px 0;
        border-bottom:2px solid #EDEDED;
        .title{
          font-weight:bold;
          @include lineClamp(24px,34px,2);
        }
        .num{
          margin-top:6px;
          line-height:34px;
          color:#999;
        }
      }
      &:last-child{
        .goods-info{
          border-bottom:0;
        }
      }
      .shop-car{
        position:absolute;
        right:30px;
        bottom:30px;
        width:56px;
        height:56px;
        background:url(https://img.wifenxiao.com/h5-wfx/images/item/list/cart.png) no-repeat;
        background-size:100%;
      }
    }
  }
</style>
